<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
<style>
    #d1{
        color:red;
    }
</style>
<body>
<div  id="app">
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
</body>
<script>
  var app =  new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
            other:'other',
        },
        watch:{ //监听
            msg:function(newval, oldval){
                console.log('new: '+newval);
                console.log('old: '+oldval);
            }
        },
        computed:{ //计算属性  触发元素重新运算和渲染
            msg1:function(){
                return 'computed：' + this.msg + this.other;
            }
        },
    });
</script>
</html>



























